<template>
  <div class="infoFinanceBox">
    <div class="FinanceBorder f-cb" id="FinanceBorder">
      <div
        class="leftFinance fl"
        :style="{ overflow: 'auto', height: height - 45 + 'px' }"
      >
        <ul class="finance">
          <li>
            <div class="top">
              <h2>
                {{ $t("m.Income_statement") }}
                <span class="fr"
                  >{{ $t("info.info_finance.56hz7dngmak0") }}
                  {{ profit.currency }}</span
                >
              </h2>
            </div>
            <div class="text">
              <!-- <h3>净利润</h3> -->
              <div
                class="bar"
                id="barOne"
                :style="'height:220px;width:360px;'"
              ></div>
              <finance-left
                :OtherSubmit="{ period: 4, type: 2 }"
                :submit="submit"
              ></finance-left>
              <!-- <dl>
                <dd>{{$t('info.info_finance.56hz7dngmw00')}} <span class="fr"></span></dd>
              </dl> -->
            </div>
          </li>
          <li>
            <div class="top">
              <h2>
                {{ $t("m.Balance_sheet") }}
                <span class="fr"
                  >{{ $t("info.info_finance.56hz7dngmak0") }}
                  {{ assets.currency }}</span
                >
              </h2>
            </div>
            <div class="text">
              <!-- <h3>总资产与总负债</h3> -->
              <div
                class="bar"
                id="barTwo"
                :style="'height:220px;width:360px;'"
              ></div>
              <finance-left
                :OtherSubmit="{ period: 4, type: 0 }"
                :submit="submit"
              ></finance-left>
            </div>
          </li>
          <li>
            <div class="top">
              <h2>
                {{ $t("m.Cash_flow") }}
                <span class="fr"
                  >{{ $t("info.info_finance.56hz7dngmak0") }}
                  {{ cash.currency }}</span
                >
              </h2>
            </div>
            <div class="text">
              <div
                class="bar"
                id="barThree"
                :style="'height:220px;width:360px;'"
              ></div>
              <finance-left
                :OtherSubmit="{ period: 4, type: 1 }"
                :submit="submit"
              ></finance-left>
            </div>
          </li>
        </ul>
      </div>
      <div
        class="rightFinance"
        :style="{ overflow: 'auto', height: height - 45 + 'px' }"
      >
        <div class="title">
          {{ $t("info.info_finance.56hz7dngn0k0") }}
          <ul class="fr">
            <li
              v-for="item in TableList"
              :key="item.type"
              @click="TableLActive = item.type"
              :class="TableLActive == item.type ? 'active' : ''"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
        <div class="content" v-if="submit">
          <info-profit
            :OtherSubmit="{ period: 4, type: 2 }"
            :submit="submit"
            v-if="TableLActive == 1"
          ></info-profit>
          <info-balance
            :OtherSubmit="{ period: 4, type: 0 }"
            :submit="submit"
            v-if="TableLActive == 2"
          ></info-balance>
          <info-statement
            :OtherSubmit="{ period: 4, type: 1 }"
            :submit="submit"
            v-if="TableLActive == 3"
          ></info-statement>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {get_financial} from '@/assets/js/API/info.js';
import FinanceLeft from "@/components/info/info_finance_left.vue";
import InfoBalance from "@/components/info/info_balance.vue"; //资产负债表
import InfoProfit from "@/components/info/info_profit.vue"; //利润表
import InfoStatement from "@/components/info/info_statement.vue"; //现金流量表
export default {
  components: {
    FinanceLeft,
    InfoBalance,
    InfoProfit,
    InfoStatement,
  },
  props: ["infoCode", "height", "RefreshIndex"],
  data() {
    return {
      show: true,
      profit: { time: [], obj: [], currency: "" },
      funnelChart: null,
      funnelOption: null,
      assets: {
        time: [],
        one: [],
        two: [],
        three: [],
        currency: "", // 当前币种
      },
      threeOption: null,
      threeChart: null,

      cash: { time: [], obj: { one: [], two: [] }, currency: "" },
      twoOption: null,
      twoChart: null,

      red: ["#DE403F"], //第一个为背景色 第二个为边框和文字色
      green: ["#2EB85E"],
      threeName: [],
      width: null,
      key: 0,
      nameTitle: "",
      moneyTitle: "",
      submit: {
        symbol: null,
        market: null,
        securityType: null,
      },
      TableList: [
        { name: this.$t("info.info_finance.56hz7dngn3k0"), type: 1 },
        { name: this.$t("info.info_finance.56hz7dngn6k0"), type: 2 },
        { name: this.$t("info.info_finance.56hz7dngna00"), type: 3 },
      ],
      TableLActive: 1,
    };
  },
  created() {
    // localStorage.setItem("lang", this.lang);
    this.threeName = [
      { name: this.$i18n.t("m.Operating"), obj: "one" },
      { name: this.$i18n.t("m.Invesing"), obj: "two" },
      { name: this.$i18n.t("m.Financing"), obj: "three" },
    ];
    this.submit = {
      symbol: this.StockData.symbol,
      market: this.StockData.market,
      securityType: this.StockData.securityType,
    };
  },
  mounted() {
    this.postClick();
  },
  methods: {
    async postClick() {
      await this.getFin();
      await this.charset();
      await this.charsetTwo();
      await this.charsetThree();
    },
    // 获取数据
    getFin() {
      var _this = this;
        get_financial(_this.submit).then(function (res) {
          if (res.code == 1) {
            _this.show = false;
            var profit = res.data.profit;
            _this.nameTitle = profit.currency;
            var assets = res.data.asset;
            var cash = res.data.cash;
            _this.profitShow = profit.list.length == 0 ? false : true;
            _this.cashShow = cash.list.length == 0 ? false : true;
            _this.assetsShow = assets.list.length == 0 ? false : true;
            _this.profit = { time: [], obj: [], currency: "" };
            _this.profit.currency = profit.currency;
            for (let index = 0; index < profit.list.length; index++) {
              const element = profit.list[index];
              _this.profit.time[index] = Number(element.report_date);
              _this.profit.obj[index] = _this.forBar(
                Number(element.net_profit)
              );
            }
            // 第一个柱状图
            _this.funnelOption.series[0].data = _this.profit.obj;
            _this.funnelOption.xAxis[0].data = _this.profit.time;
            _this.funnelChart.setOption(_this.funnelOption, true);
            _this.cash = { time: [], obj: { one: [], two: [] } };
            _this.cash.currency = cash.currency;
            for (let index = 0; index < cash.list.length; index++) {
              const element = cash.list[index];
              _this.cash.time[index] = element.report_date;
              _this.cash.obj.one[index] = Number(
                element.total_assets / 100000000
              ).toFixed(3);
              _this.cash.obj.two[index] = Number(
                element.total_liabilities / 100000000
              ).toFixed(3);
            }
            // 第二个柱状图
            _this.twoOption.series[0].data = _this.cash.obj.one;
            _this.twoOption.series[1].data = _this.cash.obj.two;
            _this.twoOption.xAxis[0].data = _this.cash.time;
            _this.twoChart.setOption(_this.twoOption, true);
            // 第三个
            // 现金流量表
            for (let index = 0; index < assets.list.length; index++) {
              const element = assets.list[index];
              _this.assets.time[index] = element.report_date;
              _this.assets.one[index] = _this.forBar(element.cash_flows);
              _this.assets.two[index] = _this.forBar(
                element.flow_investment_activities
              );
              _this.assets.three[index] = _this.forBar(
                element.financing_activities
              );
            }
            _this.assets.currency = assets.currency;
            _this.threeOption.series[0].data = _this.assets.one;
            // _this.threeOption.series[2].data = _this.assets.three;
            // _this.threeOption.series[1].data = _this.assets.two;
            _this.threeOption.xAxis[0].data = _this.assets.time;
            _this.threeChart.setOption(_this.threeOption, true);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 第一个
    charset() {
      var mycharone = this.$echarts.init(document.getElementById("barOne"));
      var option = {
        tooltip: {
          // trigger: 'axis',
          position: function (pos, params, dom, rect, size) {
            return [pos[0] - 40, 60];
          },
          confine: true,
          triggerOn: "mousemove",
          backgroundColor: "rgba(50,50,50,0.5)",
          // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          //     type: 'shadow' ,
          //     shadowStyle:{
          //         color:'rgba(150,150,150,0)'
          //     }       // 默认为直线，可选为：'line' | 'shadow'
          // },
          // backgroundColor : 'rgba(255,255,255,0.7)'
          // formatter:"{b}<br/>{c}亿元"
        },
        grid: {
          x: "0%",
          y: "0%",
          width: "100%",
          height: "85%",
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisLine: {
              lineStyle: {
                color: "#888",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#888",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            show: false,
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: "40%",
            itemStyle: {
              color: () => {
                var colorList = [];
                if (sessionStorage.getItem("color") == "RedRose") {
                  return this.red[0];
                } else {
                  return this.green[0];
                }
              },
              borderWidth: 1,
              // borderColor: this.red[1]
            },
            // label: {
            //     normal: {
            //         show: true,
            //         position: 'top',
            //         color: this.red[1],
            //     }
            // },
            data: [],
          },
        ],
      };
      this.funnelOption = option;
      mycharone.setOption(option, true);
      //   console.log( this.funnelOption)
      this.funnelChart = mycharone;
    },
    charsetTwo() {
      var mycharTwo = this.$echarts.init(document.getElementById("barTwo"));
      var option = {
        tooltip: {
          trigger: "axis",
          position: function (pos, params, dom, rect, size) {
            // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
            // var obj = {top: 60};
            // obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = pos;
            return [pos[0] - 40, 60];
          },
          backgroundColor: "rgba(50,50,50,0.5)",
          confine: true,
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow",
            shadowStyle: {
              color: "rgba(150,150,150,0)",
            }, // 默认为直线，可选为：'line' | 'shadow'
            label: {
              color: "#fff",
            },
          },
          triggerOn: "mousemove",
        },
        legend: {
          data: [
            this.$i18n.t("m.Total_assets"),
            this.$i18n.t("m.total_liability"),
          ],
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          x: "0%",
          // y:"0%",
          bottom: "15%",
          width: "100%",
          height: "70%",
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisLine: {
              lineStyle: {
                color: "#888",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#888",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            show: false,
          },
        ],
        series: [
          {
            type: "bar",
            name: this.$i18n.t("m.Total_assets"),
            itemStyle: {
              color: () => {
                if (sessionStorage.getItem("color") == "RedRose") {
                  return this.red[0];
                } else {
                  return this.green[0];
                }
              },
              // borderWidth: 1,
              // borderColor: this.red[1]
            },
            // label: {
            //     normal: {
            //         show: true,
            //         position: 'top',
            //         color: this.red[1],
            //         fontSize: 14
            //     }
            // },
            data: [],
          },
          {
            type: "bar",
            name: this.$i18n.t("m.total_liability"),
            itemStyle: {
              color: () => {
                if (sessionStorage.getItem("color") == "RedRose") {
                  return this.green[0];
                } else {
                  return this.red[0];
                }
              },
              // borderWidth: 1,
              // borderColor: this.green[1]
            },
            // label: {
            //     normal: {
            //         show: true,
            //         position: 'top',
            //         color: this.green[1],
            //     }
            // },
            data: [],
          },
        ],
      };
      this.twoOption = option;
      mycharTwo.setOption(option);
      this.twoChart = mycharTwo;
    },
    forBar(el) {
      if (sessionStorage.getItem("color") == "RedRose") {
        var name = {
          itemStyle: {
            color: el > 0 ? this.red[0] : this.green[0],
            borderWidth: 1,
          },
          value: parseFloat(el / 100000000).toFixed(3),
        };
      } else {
        var name = {
          itemStyle: {
            color: el > 0 ? this.green[0] : this.red[0],
            borderWidth: 1,
            // borderColor: el > 0 ? this.yellow[1] : this.green[1]
          },
          // label: {
          //     normal: {
          //         show: true,
          //         position: 'top',
          //         color: el > 0 ? this.yellow[1] : this.green[1],
          //     }
          // },
          value: parseFloat(el / 100000000).toFixed(3),
        };
      }
      return name;
    },
    charsetThree() {
      var mycharThree = this.$echarts.init(document.getElementById("barThree"));
      var option = {
        tooltip: {
          trigger: "axis",
          position: function (pos, params, dom, rect, size) {
            // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
            // var obj = {top: 60};
            // obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = pos;
            return [pos[0] - 40, 60];
          },
          confine: true,
          hideDelay: 200,
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow",
            shadowStyle: {
              color: "rgba(150,150,150,0)",
            }, // 默认为直线，可选为：'line' | 'shadow'
          },
          triggerOn: "mousemove",
        },
        legend: {
          data: [
            // this.StockData.market == "HKEX"
            //   ? this.$i18n.t("info.info_finance_left.56hz6ccgvso0")
            //   : this.StockData.market == "US"
            //   ? this.$i18n.t("info.info_finance_left.56hz6ccgvso0")
            //   : this.$i18n.t("info.info_finance_left.56hz6ccgvso0"),
          //   this.StockData.market == "HKEX"
          //     ? this.$i18n.t("info.info_finance_left.56hz6ccgvws0")
          //     : this.StockData.market == "US"
          //     ? this.$i18n.t("info.info_finance_left.56hz6ccgw280")
          //     : this.$i18n.t("info.info_finance_left.56hz6ccgw280"),
          //   this.StockData.market == "HKEX"
          //     ? this.$i18n.t("info.info_finance_left.56hz6ccgvzg0")
          //     : this.StockData.market == "US"
          //     ? this.$i18n.t("info.info_finance_left.56hz6ccgv4g0")
          //     : this.$i18n.t("info.info_finance_left.56hz6ccgw5c0"),
          ],
          textStyle: {
            color: "#fff",
          },
          itemWidth: 15,
          selectedMode: "single",
          x: "left", //可设定图例在左、右、居中
          y: "top",
        },
        grid: {
          left: "0%",
          top: "29%",
          bottom: "15%",
          width: "100%",
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisLine: {
              lineStyle: {
                color: "#999999",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#999",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            show: false,
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: "50%",
            name:
              this.StockData.market == "HKEX"
                ? this.$i18n.t("info.info_finance_left.56hz6ccgvso0")
                : this.StockData.market == "US"
                ? this.$i18n.t("info.info_finance_left.56hz6ccgvso0")
                : this.$i18n.t("info.info_finance_left.56hz6ccgvso0"),
            data: [],
          },
          // {
          //   type: "bar",
          //   barWidth: "50%",
          //   name:
          //     this.StockData.market == "HKEX"
          //       ? this.$i18n.t("info.info_finance_left.56hz6ccgvws0")
          //       : this.StockData.market == "US"
          //       ? this.$i18n.t("info.info_finance_left.56hz6ccgw280")
          //       : this.$i18n.t("info.info_finance_left.56hz6ccgw280"),
          //   data: [],
          // },
          // {
          //   type: "bar",
          //   barWidth: "50%",
          //   name:
          //     this.StockData.market == "HKEX"
          //       ? this.$i18n.t("info.info_finance_left.56hz6ccgvzg0")
          //       : this.StockData.market == "US"
          //       ? this.$i18n.t("info.info_finance_left.56hz6ccgv4g0")
          //       : this.$i18n.t("info.info_finance_left.56hz6ccgw5c0"),
          //   data: [],
          // },
        ],
      };
      this.threeOption = option;
      mycharThree.setOption(option);
      this.threeChart = mycharThree;
    },
  },
  watch: {
    // infoCode(val){
    //   if(val !==''){
    // this.submit.symbol= val.symbol
    // this.submit.market=val.market
    // this.submit.securityType=val.securityType
    //       this.postClick();
    //    }
    //  },
    RefreshIndex(val) {
      if (val !== "") {
        this.postClick();
      }
    },
    StockData: {
      handler(val, old) {
        if (old != undefined) {
          this.$nextTick(() => {
            this.submit.symbol = val.symbol;
            this.submit.market = val.market;
            this.submit.securityType = val.securityType;
            this.postClick();
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    StockData() {
      return this.$store.state.index.StockData;
    },
  },
};
</script>
<style lang="less" scoped>
.infoFinanceBox {
  // width: 100%;
  overflow: auto;
  .FinanceBorder {
    // width: 100%;
    min-width: 900px;
    overflow: auto;
    position: relative;
  }
  .FinanceBorder:before {
    content: "";
    width: 1px;
    height: 100%;
    background: @LightBorderLine;
    position: absolute;
    top: 0;
    left: 400px;
  }
  .leftFinance {
    float: left;
    width: 400px;
    .finance {
      li {
        font-size: 12px;
        color: @fbSix;
        padding: 10px 20px;
        h2 {
          font-size: 12px;
          color: @fff;
          line-height: 26px;
          margin-bottom: 10px;
        }
        .bar,
        .text {
          width: 100%;
        }
      }
      li:first-child {
        border-bottom: 1px solid @LightBorderLine;
      }
    }
  }
  .rightFinance {
    float: left;
    width: calc(100% - 400px);
    padding: 0 20px;
    box-sizing: border-box;
    .title {
      font-size: 12px;
      color: @fff;
      line-height: 32px;
      padding-top: 10px;
      ul {
        margin-top: 4px;
      }
      ul li {
        // width: 80px;
        height: 24px;
        padding: 0 10px;
        float: left;
        margin-left: 10px;
        background: @bgColor;
        color: @fbSix;
        font-size: 12px;
        text-align: center;
        cursor: pointer;
        line-height: 24px;
        border-radius: 3px;
      }
      ul li.active {
        color: @fff;
        background: @hoverColor;
      }
    }
  }
}
</style>
